<script setup>
import { ref, h } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from 'tdesign-mobile-vue';
import { ErrorCircleIcon } from 'tdesign-icons-vue-next';
import axios from 'axios'
const router = useRouter();
const route = useRoute();
console.log(route);

const searchModel = ref({
    studyCode: '',
    planId: route.query.planId
})

const skipQuery = (plan) => {
    var params = {
        planId: route.query.planId,
        studyCode: searchModel.value.studyCode,
    };
    axios.post('http://health.sqcoe.com/schoolServer/api/plan/queryResultByStudyCode', params).then(function (response) {
        if(response.data.data){
            router.push({
                name: "ResultQuery",
                query: params
            });
        } else {
            showWarningToast(response.data.msg);
        }
    })
}

const showWarningToast = (msg) => {
    Toast({
        icon: () => h(ErrorCircleIcon),
        direction: 'column',
        message: msg,
    });
};

</script>

<template>
    <div class="container">
        <div style="text-align: center;padding: 30px;">体测成绩查询</div>
        <t-input placeholder="请输入学号查询" v-model="searchModel.studyCode"></t-input>
        <div style="height: 30px;"></div>
        <t-button theme="primary" :disabled="!searchModel.studyCode" block @click="skipQuery">查询成绩</t-button>
    </div>
</template>

<style scoped lang="less">
.container {
    padding: 20px;
    background-color: #f9f9f9;
    height: 100%;

    .plan-item {
        background-color: #fff;
        padding: 1rem;
        border: 1px solid #f0f0f0;
        margin-bottom: 16px;
        border-radius: 6px;

        .plan-title {
            font-size: 14px;
            padding-bottom: 10px;
        }

        .plan-code {
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }

        .plan-time {
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }
    }

}
</style>
